<template>
	<view>
		<view
			id="_drag_button"
			class="drag"
			:style="'left: ' + left + 'px; top:' + top + 'px;'"
			@touchstart="touchstart"
			@touchmove.stop.prevent="touchmove"
			@touchend="touchend"
			@click.stop.prevent="click"
			:class="{ transition: isDock && !isMove, show: show }"
		>
			<slot></slot>
			<!-- <text>{{ text }}</text> -->
		</view>
	</view>
</template>

<script>
export default {
	name: 'drag-button',
	props: {
		isDock: {
			type: Boolean,
			default: false
		},
		existTabBar: {
			type: Boolean,
			default: false
		},
		limitX: {
			type: Number,
			default: 20
		},
		// 展开宽度
		maxWidth: {
			type: Number,
			default: 0
		},
		// 是否需要位移-展开时
		changeX: {
			type: Boolean,
			default: false
		},
		//展开状态
		showStatus: {
			type: Boolean,
			default: false
		},
		//初始化
		limitY: {
			type: Number,
			default: 90
		},
		initLimitY: {
			type: Number,
			default: 0//0
		},
	},
	data() {
		return {
			show: false,
			top: 20,
			left: 40,
			width: 0,
			height: 0,
			offsetWidth: 0,
			offsetHeight: 0,
			windowWidth: 0,
			windowHeight: 0,
			isMove: true,
			edge: 10,
			edgeX: 10,
			edgeY: 0,
			origwz: { x: 0, y: 0 },
			slotMaxWidth: 0,
			direction: 'right'
			// text: '按钮'
		};
	},
	watch: {
		changeX: function(e) {
			console.log('changex++eee', e);
			if (e && this.maxWidth > 0) {
				let surplus = this.windowWidth - this.left;
				surplus < this.slotMaxWidth ? (this.left = this.windowWidth - this.slotMaxWidth) : '';
				console.log('changex', surplus, this.maxWidth);
			}
		},
		showStatus: function(e) {
			if (this.show && this.maxWidth > 0) {
				// let surplus = this.windowWidth - this.left;
				// surplus < this.slotMaxWidth &&
				if (this.direction == 'right') {
					this.left = e ? this.windowWidth - this.slotMaxWidth : this.origwz.x;
				}

				setTimeout(() => {
					this.initView('changeBox');
				}, 201);
			}
		}
	},
	created() {
		this.edgeX = uni.upx2px(this.limitX);
		this.edgeY = uni.upx2px(this.limitY);
		this.slotMaxWidth = uni.upx2px(this.maxWidth);
	},
	mounted() {
		this.initView('init');
	},
	methods: {
		initView(source) {
			const sys = uni.getWindowInfo();//getSystemInfoSync
			this.windowWidth = sys.windowWidth;
			this.windowHeight = sys.windowHeight;

			// #ifdef APP-PLUS
			this.existTabBar && (this.windowHeight -= 50);
			// #endif
			if (sys.windowTop) {
				this.windowHeight += sys.windowTop;
			}
			const query = uni.createSelectorQuery().in(this);
			query
				.select('#_drag_button')
				.boundingClientRect(data => {
					this.width = data.width;
					this.height = data.height;
					this.offsetWidth = data.width / 2;
					this.offsetHeight = data.height / 2;
					this.show = true;
					if (source == 'changeBox') {
						return;
					}
					this.left = this.direction == 'right'? this.windowWidth - this.width - this.edgeX:this.edgeX;
					this.top = this.windowHeight - this.height - this.edgeY - uni.upx2px(this.initLimitY);
					if (source == 'init') {
						this.origwz.x = this.left;
						this.origwz.y = this.top;
					}
				})
				.exec();
		},
		click() {
			this.$emit('btnClick');
		},
		touchstart(e) {
			this.$emit('btnTouchstart');
		},
		touchmove(e) {
			// 单指触摸
			if (e.touches.length !== 1) {
				return false;
			}

			this.isMove = true;
			let clientX = e.touches[0].clientX - this.offsetWidth;
			// this.left = e.touches[0].clientX - this.offsetWidth;

			let clientY = e.touches[0].clientY - this.offsetHeight;
			// #ifdef H5
			clientY += this.height;
			// #endif
			let edgeBottom = this.windowHeight - this.height - this.edgeY;
			let limitX = this.windowWidth - this.width;
			if (clientX < 0) {
				this.left = 0;
			} else if (clientX > limitX) {
				this.left = limitX;
			} else {
				this.left = clientX;
			}
			// 上下触及边界
			if (clientY < this.edgeY) {
				this.top = this.edgeY;
			} else if (clientY > edgeBottom) {
				this.top = edgeBottom;
			} else {
				this.top = clientY;
			}
		},
		touchend(e) {
			if (this.isDock) {
				let edgeRigth = this.windowWidth - this.width - this.edgeX;
				if (this.left < this.windowWidth / 2 - this.offsetWidth) {
					this.left = this.edgeX;
					this.direction = 'left';
				} else {
					this.direction = 'right';
					this.left = edgeRigth;
				}
			}

			this.isMove = false;
			let params = {direction: this.direction};
			this.$emit('btnTouchend', params);
		}
	}
};
</script>

<style lang="scss" scoped>
.drag {
	display: flex;
	justify-content: center;
	align-items: center;
	// background-color: rgba(0, 0, 0, 0.5);
	// box-shadow: 0 0 6upx rgba(0, 0, 0, 0.4);
	// color: $uni-text-color-inverse;
	// width: 80upx;
	// height: 80upx;
	// border-radius: 50%;
	// font-size: $uni-font-size-sm;
	position: fixed;
	opacity: 0;
	z-index:11;

	&.transition {
		transition: left 0.2s ease, top 0.2s ease;
	}
	&.show {
		opacity: 1;
	}
}
</style>
